<template>
  <div class="searchContainer">
    <div :class="{'optionsBox':true,'isExtend':isExtend}">
      <div :class="{'optionItem':true,'selected':selectedId==item.value}" v-for="item,index in optionsList" :key="index"
        @click="handleItemClick(item)">
        {{item.label}}
      </div>
    </div>
    <!-- <div class="switchBtn" @click="handleSwitchBtnClick">其他地区</div> -->
  </div>
</template>

<script>
export default {
  name: "workYearSearch",
  data() {
    return {
      optionsList: [
        { label: "全部", value: "" },
        { label: "高中及以下", value: "高中及以下" },
        { label: "大专", value: "大专" },
        { label: "本科", value: "本科" },
        { label: "硕士", value: "硕士" },
        { label: "博士", value: "博士" },
      ],
      selectedId: "",
      isExtend: false,
    };
  },
  methods: {
    handleItemClick(item) {
      this.selectedId = item.value;
      this.$emit("change", item);
    },
    handleSwitchBtnClick() {
      this.isExtend = !this.isExtend;
    },
  },
};
</script>

<style lang="scss" scoped>
.searchContainer {
  display: flex;
  align-items: flex-start;
  .optionsBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 1000px;
    height: 26px;
    overflow: hidden;
    transition: height 0.2s;
    .optionItem {
      color: #555;
      float: left;
      line-height: 1.2;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      &:hover {
        background-color: #e2f3ff;

        color: #0b6eff;
      }
    }
    .selected {
      background-color: #e2f3ff;

      color: #0b6eff;
    }
    &.isExtend {
      height: auto;
      transition: height 0.2s;
    }
  }
  .switchBtn {
    color: #999;
    cursor: pointer;
    line-height: 1.2;
    padding: 5px 10px;
    border-radius: 4px;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>